.color-picker {
    // debug values
    --current-hue: 210;
    --color-cursor-x: 1;
    --color-cursor-y: 0.5;
    --hue-cursor: 1;

    display: grid;
    grid:
        "map dis" auto
        "map csp" auto
        "inp csp" auto
        "inp opt" auto
        / minmax(auto, max-content) 1fr;
    gap: 0.8rem;

    width: 100%;
    margin-inline: auto;
    padding: 0.8rem;

    border-radius: 0.4rem;

    background-color: var(--bg-secondary);

    // @container main (max-width: 800px) {
    // 	background-color: lightblue;
    // }

    .map {
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
        grid-area: map;
        width: 300px;
        height: 10rem;

        .sat-value-surface {
            flex-grow: 1;

            height: auto;
        }
    }

    @container (max-width: 42rem) {
        .map {
            aspect-ratio: 1;
            height: unset;
        }
    }
}

.sat-value-surface {
    touch-action: none;
    user-select: none;

    position: relative;

    width: 100%;
    height: 100%;

    border-radius: 0.8rem;

    background-color: hsl(calc(var(--current-hue) * 360), 100%, 50%);

    * {
        user-select: none;
    }

    &::before {
        content: "";
        z-index: 1;

        position: absolute;
        inset: 0;

        border-radius: inherit;

        background: linear-gradient(to top, black, white);
        mix-blend-mode: multiply;
    }

    &__cursor {
        --border-color: hsl(
            0,
            0%,
            calc(max(var(--cursor-y) * 2, var(--cursor-x) * 2) * 100%)
        );

        z-index: 3;
        cursor: pointer;

        box-sizing: border-box;
        position: absolute;
        top: calc(var(--cursor-y) * 100% - 0.5rem);
        left: calc(var(--cursor-x) * 100% - 0.5rem);

        width: 1rem;
        height: 1rem;

        border: 2px solid var(--border-color);
        border-radius: 50%;
    }

    &::after {
        content: "";
        z-index: 2;

        position: absolute;
        inset: 0;

        border-radius: inherit;

        background: linear-gradient(to top, black, white);
        mask-image: linear-gradient(to right, black, transparent);
        mix-blend-mode: lighten;
    }
}

.hue-slider {
    touch-action: none;
    user-select: none;

    position: relative;

    width: 100%;
    height: 1rem;

    border-radius: 0.8rem;

    background: linear-gradient(
        to right,
        #ff0000 0,
        #ffff00 16.67%,
        #00ff00 33.33%,
        #00ffff 50%,
        #0000ff 66.67%,
        #ff00ff 83.33%,
        #ff0000 100%
    );

    * {
        user-select: none;
    }

    &__cursor {
        --width: 0.4rem;

        cursor: pointer;

        position: absolute;
        top: -0.2rem;
        bottom: -0.2rem;
        left: calc(var(--hue) * 100% - var(--width) / 2);

        width: var(--width);

        border-radius: var(--width);

        background-color: white;
    }
}

.color-picker-wrapper {
    position: fixed;
    z-index: 10000;
    top: 0;
    left: 0;
}
